<template>
	<view class="container">
		<view class="form">
			<view class="form-one d-rn d-ac d-jb">
				<input type="text" :placeholder="$t('Please_enter_new_password')" password placeholder-style="color:#CCD0D4;" v-model="form.password">
			</view>
			<view class="form-one d-rn d-ac d-jb">
				<input type="text" :placeholder="$t('Please_enter_password_again')" password placeholder-style="color:#CCD0D4;" v-model="form.rpassword">
			</view>
			<view class="form-btn d-rn d-ac d-jc" @click="submitForm">
				<text class="d-rn d-ac d-jc">{{ $t('picker_confirm') }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updatePwd
	} from "@/api/mine.js"
	export default {
		data() {
			return {
				form: {
					password: null,
					rpassword: null
				}
			}
		},
		onLoad() {

		},
		methods: {
			submitForm() {
				if (!this.form.password) {
					uni.$u.toast(this.$t('Please_enter_new_password'));
				} else if (this.form.password.length < 6 || this.form.password.length > 20) {
					uni.$u.toast(this.$t('Please_enter_password_between_6_20'));
				} else if (!this.form.rpassword) {
					uni.$u.toast(this.$t('Please_enter_new_password_again'));
				} else if (this.form.password != this.form.rpassword) {
					uni.$u.toast(this.$t('The_two_passwords_entered_are_inconsistent'));
				} else {
					updatePwd({
						password: this.form.password
					}).then((res) => {
						uni.$u.toast(this.$('modify_success'));
						setTimeout(() => {
							this.$store.commit('setUserInfo', null);
							uni.reLaunch({
								url: '/pages/login/index'
							})
						}, 1000)
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;

		.form {
			width: 80%;
			margin: 0 auto;
			margin-top: 358rpx;

			&-one {
				width: 100%;
				height: 98rpx;
				border-radius: 2em;
				background-color: #F6F6F6;
				margin-bottom: 24rpx;

				input {
					width: 100%;
					padding: 0 60rpx;
					box-sizing: border-box;
				}
			}

			&-btn {
				width: 100%;
				height: 90rpx;
				border-radius: 2em;
				background-color: #FED42A;
				margin-top: 98rpx;
			}

		}
	}
</style>